<template>
   <div class="detail-top">
       <div class="container">
          <div class="top-left">
            <product-swiper></product-swiper>
          </div>
          <div class="top-right">
            <h1 class="title1">{{this.name}}</h1>
            <p class="title2">{{this.first_name}}</p>
            <div class="price">
              <div class="price1">
                
                <div class="price-total"><span class="word">商品价格：</span><span class="price-price"> {{this.price}}</span>元</div>
              </div>
              <div class="price2">
                  原价：{{this.rands}}元
              </div>
            </div>
            <div class="youhui">产品特点： <span>{{this.second_name}}</span></div>
            <div class="form">
              <input type="text" v-model="username" placeholder="您的姓名" class="form-name">
              <input type="text" v-model="phone" placeholder="您的手机号">
              <img src="@/assets/product-detail/btn1.png" alt="" class="submit" @click="submit()">
            </div>
          </div>
       </div>
       
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import ProductSwiper from './ProductSwiper.vue';
export default {
  name: 'productDetail-top',
  components:{
    ProductSwiper,
  },
  props:{
     imgs:Array,
     fitstTitle:String,
     secondTitle:String,
     data:Object
  },
  data () {
    return {
      username:'',
      phone:'',
      msg: 'index',
      name:'',
      first_name:'',
      second_name:'',
      price:'',
      description:'官网产品页',
      message:'',
      rands:''
    }
  },
  watch:{
    data(){
      // console.log('aaa')
      // console.log(this.data)
      this.name = this.data.name
      this.first_name = this.data.first_title
      this.second_name = this.data.second_title
      this.price = this.data.price
      this.message =this.data.id+"-"+this.data.name+"-"+this.data.first_title+"-"+this.data.second_title
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    this.rand()
    
  },
  methods:{
    rand(){
        var rand = "";
        for(var i = 0; i < 5; i++){
            var r = Math.floor(Math.random() * 10);

            rand += r;

        }
        this.rands = rand;
    },
    submit (){
        axios.get(this.baseUrl+'cms/joinAdd',
        {
            params:{
                username:this.username,
                phone:this.phone,
                message:this.message,
                description:this.description,
                local:'0'
            }
        }).then(this.submitSucc)
    },
    submitSucc(response){
    //    console.log(response)
      const h = this.$createElement;
        if(response.data.errno===0){        
          this.$notify({
            title: '成功提醒',
            type: 'success',
            message: h('i', { style: 'color: teal'}, '留言成功，稍后客服会给你回复，请耐心等待')
          });
        }else if(response.data.errno===1){          
            this.$notify.error({
              title: '错误提醒',
              message: h('i', { style: 'color: teal'}, '该手机号已提交过留言，请等待客服回复')
            });
        }
    }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.container
  container()  
  margin-top 20px
.detail-top
  overflow hidden
  background white
  .top-left
    float left
    width 584px
  .top-right
    float right
    width 594px
    height 538px
    position relative
    .title1
      font-size 18px
      margin-bottom 25px
    .title2
      font-size 12px
      color #333333
      text-align left
      border-bottom 1px solid #b3b3b3
      margin-bottom 27px
      padding-bottom 34px
.price
  overflow hidden
  .price1
    float left
    overflow hidden
.price1>div
  font-size 14px
  
.price-total
  color #ef0000
.price-price
  font-size 30px
.word 
  color black
.price2
  float left
  margin-top 13px
  margin-left 20px
  text-decoration line-through
.youhui
  font-size 14px
  margin-top 14px
.form
  background url('~@/assets/product-detail/formbg.png') no-repeat center center
  width 100%
  height 246px
  position absolute 
  left 0 
  bottom 0
  overflow hidden
.form>input 
  width 380px
  height 40px
  background white
  text-indent 10px
  line-height 40px
  margin 0 auto
  margin-top 10px
  display block
.form>.form-name
  margin-top 76px
.submit
  width 380px
  height 40px
  margin 0 auto
  display block
  margin-top 10px
</style>
